import React, { useState } from 'react';
import { Plus } from 'lucide-react';
import { fishCategories } from '../data/categories';
import { FishEvent } from '../types';

interface EventFormProps {
  onEventSaved: (event: FishEvent) => void;
}

const EventForm: React.FC<EventFormProps> = ({ onEventSaved }) => {
  const [selectedCategory, setSelectedCategory] = useState(fishCategories[0]);
  const [duration, setDuration] = useState('');
  const [location, setLocation] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!duration || parseInt(duration) <= 0) return;

    setIsSubmitting(true);

    const event: FishEvent = {
      id: Date.now().toString(),
      type: selectedCategory.id,
      duration: parseInt(duration),
      location: location || '工位',
      description: description || '',
      timestamp: Date.now(),
      date: new Date().toLocaleDateString('zh-CN')
    };

    onEventSaved(event);

    // 重置表单
    setDuration('');
    setLocation('');
    setDescription('');
    
    setTimeout(() => {
      setIsSubmitting(false);
    }, 500);
  };

  return (
    <div className="bg-white rounded-lg shadow-md p-6 animate-slide-up hover:shadow-lg transition-shadow duration-300">
      <h2 className="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
        <Plus className="h-5 w-5 animate-spin-slow" />
        记录新的摸鱼事件
      </h2>

      <form onSubmit={handleSubmit} className="space-y-6">
        {/* 摸鱼类型选择 */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-3">
            选择摸鱼类型
          </label>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 animate-fade-in">
            {fishCategories.map((category, index) => (
              <button
                key={category.id}
                type="button"
                onClick={() => setSelectedCategory(category)}
                className={`p-4 rounded-lg text-center transition-all duration-300 transform hover:scale-110 active:scale-95 animate-fade-in-up ${
                  selectedCategory.id === category.id
                    ? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg animate-pulse-gentle'
                    : 'bg-gray-50 hover:bg-gray-100 text-gray-700 hover:shadow-md hover:rotate-1'
                }`}
                style={{ animationDelay: `${index * 50}ms` }}
              >
                <div className="text-3xl mb-2 animate-bounce-gentle">{category.icon}</div>
                <div className="font-medium text-sm">{category.name}</div>
                <div className="text-xs mt-1 opacity-75">{category.description}</div>
              </button>
            ))}
          </div>
        </div>

        {/* 表单字段 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              摸鱼时长 (分钟) *
            </label>
            <input
              type="number"
              min="1"
              max="480"
              value={duration}
              onChange={(e) => setDuration(e.target.value)}
              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-blue-300 focus:scale-105"
              placeholder="例如：15"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              摸鱼地点
            </label>
            <input
              type="text"
              value={location}
              onChange={(e) => setLocation(e.target.value)}
              className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-blue-300 focus:scale-105"
              placeholder="工位、茶水间、洗手间等"
            />
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            备注描述
          </label>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            rows={3}
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-blue-300 focus:scale-105"
            placeholder="记录这次摸鱼的心情、感受或其他细节..."
          />
        </div>

        <button
          type="submit"
          disabled={isSubmitting || !duration || parseInt(duration) <= 0}
          className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 px-6 rounded-lg font-medium hover:from-blue-600 hover:to-purple-600 disabled:from-gray-300 disabled:to-gray-300 disabled:cursor-not-allowed transition-all duration-300 transform hover:scale-105 active:scale-95 hover:shadow-lg animate-shimmer bg-[length:200%_100%]"
        >
          {isSubmitting ? (
            <span className="flex items-center justify-center gap-2">
              <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
              保存中...
            </span>
          ) : (
            '保存摸鱼记录 🐟'
          )}
        </button>
      </form>
    </div>
  );
};

export default EventForm;